const { defineComponent, h,ref, reactive, toRef} = require("vue");
import {DatetimePicker,Popup} from "vant"
import {px_e_rem} from "@uit/common.js"
import moment from "moment";
import "./index.css"
import { unknownProp } from "vant/lib/utils";


const TimePicker = defineComponent({
    data(){
        return{

        }
    },
    props:{
        startTime:{
            type:unknownProp,
            require:true
        },
        endTime:{
            type:unknownProp,
            require:true
        },
        showstart:{
            type:Boolean,
            require:true
        },
        showsend:{
            type:Boolean,
            require:true
        },
        startConfirm:{
            type:Function,
            require:false
        },
        startCancel:{
            type:Function,
            require:false
        },
        endConfirm:{
            type:Function,
            require:false
        },
        endCancel:{
            type:Function,
            require:false
        },
        total:{
            type:Object,
            required:true
        }
    },
    emits:['update:showstart','update:showsend','update:startTime','update:endTime'],
        setup(props,{emit}){
            const getmoney = (value) =>{
                if(value==undefined){
                    return 0
                  }else{
                    return   String(value/100).replace(/^(.*\..{2}).*$/ ,"$1")
                  }
            }
            const delzero = (value) =>{
                if(value<10){
                    return value.substr(1)
                }
                return value
            }
            const getEMonth = (val) =>{
                switch(val){
                    case '01':
                        return 'January'
                    case '02':
                        return 'February '
                    case '03':
                        return 'March  '
                    case '04':
                        return 'April '
                    case '05':
                        return 'May '
                    case '06':
                        return 'June '
                    case '07':
                        return 'July '
                    case '08':
                        return 'August '
                    case '09':
                        return 'September '
                    case '10':
                        return 'October '
                    case '11':
                        return 'November '
                    case '12':
                        return 'December '                                 
                }
            }

            const startTimes = () => {
                const dates = moment(props.startTime).format("YYYY-MM-DD").split('-')
                return h(
                    'div',
                    {class:'createTimes',onClick:()=>emit("update:showstart",true)},
                    [
                        h('span',{class:'createTimes_1'},`${delzero(dates[2])}`),
                        h('div',{class:'createTimes_2'},[
                            `${getEMonth(dates[1])} ${dates[0]}`,
                            h('img',{src:require('../../assets/imgs/time_down.png'),style:{width:px_e_rem(16),height:px_e_rem(10)}})
                        ])
                    ]
                )
            }

            const endTimes = () => {

                const dates = moment(props.endTime).format("YYYY-MM-DD").split('-')
                return h(
                    'div',
                    {class:'createTimes',onClick:()=>emit("update:showsend",true)},
                    [
                        h('span',{class:'createTimes_1'},`${delzero(dates[2])}`),
                        h('div',{class:'createTimes_2'},[
                            `${getEMonth(dates[1])} ${dates[0]}`,
                            h('img',{src:require('../../assets/imgs/time_down.png'),style:{width:px_e_rem(16),height:px_e_rem(10)}})
                        ])
                    ]
                )
            }

            const choice = () => {
                return h(
                    'div',
                    {
                        class:'choice'
                    },
                    [
                        startTimes(),
                        h('div',{class:'choice_z'},'~'),
                        endTimes()
                    ]
                )
            }
            const startCheck = () => {
                
                const formatter = (type, val) => {
                    if (type === 'month') {
                        switch(val){
                            case '01':
                                return 'January'
                            case '02':
                                return 'February '
                            case '03':
                                return 'March  '
                            case '04':
                                return 'April '
                            case '05':
                                return 'May '
                            case '06':
                                return 'June '
                            case '07':
                                return 'July '
                            case '08':
                                return 'August '
                            case '09':
                                return 'September '
                            case '10':
                                return 'October '
                            case '11':
                                return 'November '
                            case '12':
                                return 'December '                                 
                        }
                    }
                    return val
                  };
                const confrim = () =>{
                        emit("update:showstart",false)
                }

                const cancel = () => {
                    emit("update:showstart",false)
                }

                return h(Popup,{show:props.showstart,position:'bottom','onUpdate:show':($event)=>emit("update:showstart",$event)},{default:()=>h(
                    DatetimePicker,
                    {   
                        type:'date',
                        modelValue:props.startTime,
                        formatter:formatter,
                        // 'onUpdate:modelValue':($event)=>emit("update:startTime",$event),
                        'onConfirm':($event)=>props.startConfirm?props.startConfirm($event):confrim()
                    },{
                        confirm:()=>h('button',{style:{color:'#3E39D8',fontSize:px_e_rem(38),border:'none',background:'transparent'},},"Confirm"),
                        cancel:()=>h('button',{style:{color:'#3E39D8',fontSize:px_e_rem(38),border:'none',background:'transparent'},onClick:props.startCancel?props.startCancel:cancel},"Cancel"),
                        title:()=>h("span",{style:{fontSize:px_e_rem(30)}},"Starting time")
                    }
                )})
            }

            const endCheck = () => {
                
                const formatter = (type, val) => {
                    if (type === 'month') {
                        switch(val){
                            case '01':
                                return 'January'
                            case '02':
                                return 'February '
                            case '03':
                                return 'March  '
                            case '04':
                                return 'April '
                            case '05':
                                return 'May '
                            case '06':
                                return 'June '
                            case '07':
                                return 'July '
                            case '08':
                                return 'August '
                            case '09':
                                return 'September '
                            case '10':
                                return 'October '
                            case '11':
                                return 'November '
                            case '12':
                                return 'December '                                 
                        }
                    }
                    return val
                  };
                const confrim = () =>{
                        moment(props.endTime).format("YYYY-MM-DD")
                        emit("update:showsend",false)
                }

                const cancel = () => {
                    emit("update:showsend",false)
                }
                return h(Popup,{show:props.showsend,position:'bottom','onUpdate:show':($event)=>emit("update:showsend",$event)},{default:()=>h(
                    DatetimePicker,
                    {   
                        type:'date',
                        modelValue:props.endTime,
                        formatter:formatter,
                        // 'onUpdate:modelValue':($event)=>emit("update:endTime",$event),
                        'onConfirm':($event)=>props.endConfirm?props.endConfirm($event):confrim()
                    },{
                        confirm:()=>h('button',{style:{color:'#3E39D8',fontSize:px_e_rem(38),border:'none',background:'transparent'}},"Confirm"),
                        cancel:()=>h('button',{style:{color:'#3E39D8',fontSize:px_e_rem(38),border:'none',background:'transparent'},onClick:props.endCancel?props.endCancel:cancel},"Cancel"),
                        title:()=>h("span",{style:{fontSize:px_e_rem(30)}},"End Time")
                    }
                )})
            }

            return ()=>h(
                'div',
                {
                    class:'TimePicker'
                },
                [
                    choice(),
                    startCheck(),
                    endCheck(),
                    h('div',{class:'TimePicker-totals'},[
                        h('span',{},`Expenditure:₹${getmoney(props.total.Expenditure)}`),
                        h('span',{},`Income:₹${getmoney(props.total.Income)}`)
                    ])
                ]
            )   
        }
})

export default TimePicker